/**
 * 数采地图 - 集团
 */
import React from 'react';
import styles from './index.less';
import { Breadcrumb } from 'antd';
import { connect } from 'umi';
import { Context } from './context';
import event from './event';

import MapComp from './components/MapComp';
import Automation from './components/Automation';
import DataSituation from './components/DataSituation';
import DataQuality from './components/DataQuality';

@connect(({ group }) => ({
  group,
}))
export default class extends React.Component {
  componentDidMount = () => {};
  getItem = (params = {}) => {
    var style = {
      background: params.bgColor,
    };
    if (params.end) style.margin = 0;
    return (
      <div className={styles.item} style={style}>
        <div className={styles.title}>{params.title}</div>
        <div className={styles.describe}>{params.describe}</div>
        <div className={styles.img}>
          <img src={params.icon} />
        </div>
      </div>
    );
  };
  render() {
    const { header } = this.props.group;
    var store = {};
    return (
      <Context.Provider value={store}>
        <div className={styles.pageRoot}>
          <div className={styles.header}>
            <Breadcrumb>
              <Breadcrumb.Item>数据资产</Breadcrumb.Item>
              <Breadcrumb.Item>集团数采地图</Breadcrumb.Item>
            </Breadcrumb>
            <div className={styles.title}>集团数采地图</div>
          </div>

          <div className={styles.icons}>
            {this.getItem({
              title: '累计数采量',
              describe: header.aaaa1,
              bgColor: 'linear-gradient(135deg, #5EC5EE 0%, #4EB0D7 100%)',
              icon: require('./img/icon1.png'),
            })}

            {this.getItem({
              title: '今日数采量',
              describe: header.aaaa2,
              bgColor: 'linear-gradient(135deg, #4186FD 0%, #3671D7 100%)',
              icon: require('./img/icon2.png'),
            })}

            {this.getItem({
              title: '数采自动化率',
              describe: header.aaaa3,
              bgColor: 'linear-gradient(135deg, #61D5B4 0%, #4DAF93 100%)',
              icon: require('./img/icon3.png'),
            })}

            {this.getItem({
              title: '数据上达率',
              describe: header.aaaa4,
              bgColor: 'linear-gradient(135deg, #2399E8 0%, #405AD5 100%)',
              icon: require('./img/icon4.png'),
            })}

            {this.getItem({
              title: '数据质量异常率',
              describe: header.aaaa5,
              bgColor: 'linear-gradient(135deg, #5CC2EB 0%, #32A4D1 100%)',
              icon: require('./img/icon5.png'),
              end: true,
            })}
          </div>

          <div className={styles.map}>
            <MapComp />
          </div>

          <div>
            <Automation />
            <DataSituation />
            <DataQuality />
          </div>
        </div>
      </Context.Provider>
    );
  }
}
